<!-- progessfullFormat -->
<template>
    <div>
      <div  :style="{backgroundColor:comBackgroundColor(progess)}">
        <div class="activecolor" style="width:100px;height:30px;position:relative;" >
          <div style="color:#fff;" class="data"></div>
          <div class="data" style="z-index:2;paddingLeft:10px;" :style="{color:this.templateConfig.fontColor}">{{progess+this.templateConfig.Modifier}}</div>
      </div>
    </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      templateConfig: {
        maximum: 50,
        fontColor: 'black',
        minColor: '#FFEBE5',
        maxColor: '#E3FCEF',
        Modifier: null
      }

    }
  },
  mounted () {
    if (!this.$data.data.column.templateConfig) {
      this.$data.data.column = { ...this.$data.data.column, ...this.templateConfig }
    }
    this._.merge(this.templateConfig, this.$data.data.column.templateConfig)
  },
  computed: {
    progess () {
      return Number(this.$data.data[this.$data.data.column.field])
    }
  },
  methods: {
    comBackgroundColor (progess) {
      if (this.templateConfig.maximum < progess) {
        return this.templateConfig.maxColor
      }

      return this.templateConfig.minColor
    }
  }
}
</script>

<style>
.data {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
</style>
